import React from "react"

const ThemeToggle = props => {
    let { theme, onChange } = props
    function changeTheme(e, k) {
        // console.log(e);
        //手动取值，然后把最新的theme传给父组件
        // this.setState(s=>({theme:{...s.theme,[k]:e.target.value}}))//简写版
        // this.setState(s => {
        //     return {
        //         theme: {
        //             ...s.theme,
        //             [k]: e.target.value
        //         }
        //     }
        // })
        onChange && onChange({ ...theme, [k]: e.target.value })
    }
    return (
        <div>
            <span>前景色:</span>
            <input type="color" value={theme.color || '#ffffff'} onChange={_ => changeTheme(_, 'color')} />
            <span>背景色:</span>
            <input
                type="color"
                value={theme.background || '#000000'}
                onChange={_ => changeTheme(_, 'background')}
            />
        </div>
    )
}

export {
    ThemeToggle
}